<template>
  <div class="photo-layer-mian" id="photoLayerMain">
    <div class="photo-head-main">
      <div class="head-left">
        <i class="el-icon-picture-outline" /> {{ title }}
      </div>
      <div class="head-right">
        <i class="el-icon-download" title="下载"/>
        <i class="el-icon-files" title="图片列表" @click="onRightImgListFn"/>
        <i class="el-icon-close" title="关闭"/>
      </div>
    </div>
    <div class="photo-nav-main photo-upper-main" title="上一张">
      <i class="el-icon-arrow-left"/>
    </div>
    <div class="photo-nav-main photo-next-main" title="下一张" :style="listShow ? 'right: 300px' : 'right: 0'">
      <i class="el-icon-arrow-right"/>
    </div>
    <div class="photo-img-main" id="photoImgMain">
      <!-- 1644832145805 :width="wImg" :height="hImg" -->
      <img
          :src="uImg"
          alt=""
          :width="wImg"
          :height="hImg"
          :style="canMove ? 'transition: all 0s ease-in' : 'transition: all .3s ease-in'"/>
    </div>
    <div class="photo-footer-main">
      <i class="el-icon-zoom-in" title="放大" @click="onScaleFn('large')" />
      <i class="el-icon-zoom-out" title="缩小" @click="onScaleFn('small')"/>
      <i class="el-icon-refresh-right" title="向右旋转" @click="onRotateFn('right')" />
      <i class="el-icon-refresh-left" title="向左旋转" @click="onRotateFn('left')" />
      <i class="el-icon-position" title="在新的浏览器窗口打开" @click="onOpenFn()"/>
      <i class="el-icon-refresh" title="还原" @click="onReductionFn()"/>
    </div>
    <div class="photo-right-list-main" :style="listShow ? 'right: 0' : 'right: -300px'">
      <div class="img-list-title">
        <div class="lt-left">
          <i class="el-icon-menu"/>图片列表
        </div>
        <div class="lt-right">
          {{ index + 1 }} / {{ rightImgList.length }}
        </div>
      </div>
      <div class="img-list-main">
        <div class="img-list" v-for="(item, index) in rightImgList" :key="index" @click="onRImgFn(item, index)">
          <img :src="item.isUrl" alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'photo',
  data () {
    return {
      bodyDom: '',
      photoLayerMainId: '',
      photoImgMainId: '',
      title: '',
      index: 0,
      // 右侧图片列表是否展示
      listShow: true,
      // 主图片的宽、高
      wImg: '1000px',
      hImg: 'auto',
      uImg: '',
      isImg: '',
      // 右侧图片列表
      rightImgList: [
        { id: '132', title: '图片名称图片名称1图片名称1图片名称1图片名称1图片名称1', isUrl: require('../../assets/img/001.jpg') },
        { id: '1312', title: '图片名称图片名称1图片名称1图片名称1图片名称1', isUrl: require('../../assets/img/002.jpg') },
        { id: '1', title: '图片名称1', isUrl: require('../../assets/img/01.png') },
        { id: '2', title: '图片名称2', isUrl: require('../../assets/img/02.png') },
        { id: '3', title: '图片名称3', isUrl: require('../../assets/img/600.png') },
        { id: '4', title: '图片名称4', isUrl: require('../../assets/img/1644832145805.png') },
        { id: '11', title: '图片名称1', isUrl: require('../../assets/img/01.png') },
        { id: '22', title: '图片名称2', isUrl: require('../../assets/img/02.png') },
        { id: '33', title: '图片名称3', isUrl: require('../../assets/img/600.png') },
        { id: '44', title: '图片名称4', isUrl: require('../../assets/img/1644832145805.png') },
      ],
      // 缩放
      scaleIndex: 1,
      // 旋转
      rotateIndex: 0,
      // 拖拽
      canMove: false,
      offsetX: 0,
      offsetY: 0,
    }
  },
  /*created() {
    this.$nextTick(() => {
      this.infoFn ()
      window.addEventListener("resize", this.infoWindowFn)
    })
  },*/
  methods: {
    // 初始化
    infoFn () {
      this.bodyDom = document.body
      this.photoLayerMainId = document.getElementById('#photoLayerMain')
      console.log(this.photoLayerMainId)
      this.bodyDom.appendChild(this.photoLayerMainId)
      this.infoWindowFn ()
      this.infoWindowImgFn ()
    },

    // 设置主窗口大小
    infoWindowFn () {
      this.photoImgMainId = document.getElementById('photoImgMain')
      if (this.listShow) {
        this.photoImgMainId.style.width = (this.bodyDom.offsetWidth - 300) + 'px'
      } else {
        this.photoImgMainId.style.width = this.bodyDom.offsetWidth + 'px'
      }
    },

    // 右侧图片列表
    onRightImgListFn () {
      this.listShow = !this.listShow
      this.infoWindowFn ()
    },

    // 右侧图片列表点击事件
    onRImgFn (item, index) {
      this.title = item.title
      this.uImg = item.isUrl
      this.index = index
    },

    // 获取主窗口图片
    infoWindowImgFn () {
      if (this.rightImgList.length > 0) {
        this.title = this.rightImgList[0].title
        this.uImg = this.rightImgList[0].isUrl
        this.isImg = this.photoImgMainId.getElementsByTagName('img')[0]
        // 拖拽事件
        this.photoImgMainId.onmousedown = (e => {
          this.infoPositionImgFn (e)
        })
      }
    },

    // 缩放
    onScaleFn (type) {
      // 放大
      if (type === 'large') {
        this.scaleIndex += 0.5
      }
      // 缩小
      if (type === 'small' && this.scaleIndex > 0.5) {
        this.scaleIndex -= 0.5
      }
      this.isImg.style.transform = 'rotate('+ this.rotateIndex +'deg)' + 'scale('+ this.scaleIndex +')'
    },

    // 旋转
    onRotateFn (type) {
      // 向右旋转
      if (type === 'right') {
        this.rotateIndex += 90
      }
      // 向左旋转
      if (type === 'left') {
        this.rotateIndex -= 90
      }
      this.isImg.style.transform = 'rotate('+ this.rotateIndex +'deg)' + 'scale('+ this.scaleIndex +')'
    },

    // 外部打开
    onOpenFn () {
      window.open(this.uImg)
    },

    // 还原
    onReductionFn () {
      this.scaleIndex = 1
      this.rotateIndex = 0
      this.isImg.style.transform = 'scale('+ this.scaleIndex +')'
      this.isImg.style.transform = 'rotate('+ this.rotateIndex +'deg)'
      this.offsetX = 0
      this.offsetY = 0
      this.canMove = false
      this.isImg.style.right = '20%'
      this.isImg.style.left = '0'
      this.isImg.style.top = '0'
    },

    // 拖拽 -- 记录位置
    infoPositionImgFn (e) {
      let evt = e || event
      evt.preventDefault()
      this.canMove = true
      this.offsetX = evt.clientX - this.isImg.offsetLeft
      this.offsetY = evt.clientY - this.isImg.offsetTop
      document.onmousemove =  (e => {
        this.infoDragImgFn (e)
      })
      document.onmouseup = (() => {
        this.infoDragCloseImgFn ()
      })
    },

    // 拖拽
    infoDragImgFn (evt) {
      if (this.canMove === true) {
        evt.preventDefault()
        let left = evt.clientX - this.offsetX
        let top = evt.clientY - this.offsetY
        console.log(top)
        //this.isImg.style.cssText = 'right: 0;' + 'left:' + left + 'px;' + 'top:' + top + 'px;'
        this.isImg.style.right = ''
        this.isImg.style.left = left + 'px'
        this.isImg.style.top = top + 'px'
      }
    },

    // 鼠标抬起关闭拖拽
    infoDragCloseImgFn () {
      this.canMove = false
      document.onmousemove = null
    },

  }
}
</script>

<style lang="scss" scoped>
.photo-layer-mian {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  font-size: 14px;
  z-index: 19960915;
  background-color: rgba(51, 51, 51, 0.95);
  .photo-head-main {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 0 0 0 10px;
    color: #fff;
    background-color: #000000;
    .head-left {
      flex-shrink: 1;
      width: 300px;
      line-height: 50px;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      i {
        margin-right: 5px;
      }
    }
    .head-right {
      i {
        font-size: 18px;
        cursor: pointer;
        width: 60px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        transition: all .3s ease-in;
        &:hover {
          color: #000000;
          background-color: #fff;
        }
      }
    }
  }
  .photo-nav-main {
    position: absolute;
    top: 48%;
    width: 40px;
    height: 80px;
    line-height: 80px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    z-index: 19960916;
    transition: all .3s ease-in;
    background-color: rgba(0, 0, 0, 0.1);
    i {
      font-size: 18px;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .photo-upper-main {
    left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .photo-next-main {
    right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .photo-img-main {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    transition: all .3s ease-in;
    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
      border: none;
      vertical-align: middle;
      transition: all .3s ease-in;
    }
  }
  .photo-footer-main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    text-align: center;
    transition: all .3s ease-in;
    background-color: rgba(0, 0, 0, 0.5);
    i {
      font-size: 18px;
      cursor: pointer;
      width: 80px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transition: all .3s ease-in;
      &:hover {
        color: #000000;
        background-color: #fff;
      }
      &:nth-child(1) {
        border-top-left-radius: 5px;
      }
      &:nth-last-child(1) {
        border-top-right-radius: 5px;
      }
    }
  }
  .photo-right-list-main {
    position: fixed;
    top: 50px;
    right: -300px;
    width: 300px;
    height: calc(100vh - 50px);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    color: #fff;
    background-color: #333;
    transition: all .3s ease-in;
    .img-list-title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      border-bottom: 1px solid #636363;
      .lt-left {
        i {
          margin-right: 5px;
        }
      }
      .lt-right {
        font-size: 12px;
      }
    }
    .img-list-main {
      height: calc(100vh - 90px);
      overflow: hidden;
      overflow-y: auto;
      .img-list {
        margin-bottom: 10px;
        cursor: pointer;
        border: 1px solid #636363;
        padding: 5px;
        transition: all .3s ease-in;
        background-color: #242424;
        &:hover {
          background-color: #636363;
        }
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        img {
          width: 100%;
          height: 120px;
          border: none;
        }
      }
    }
  }
}
</style>